<template>
    <div>
        <h1>展示分类</h1>
        <p v-for="i in cate_list" :key="i.id">
            <button @click="info(i.id)">{{i.name}}</button>
        </p>
        <h1>展示产品</h1>
        <table style="margin : auto; width:20%;">
            <tr>
                <td>商品名</td>
                <td>价格</td>
                <td>图片</td>
            </tr>
            <tr v-for="i in goods_list" :key="i.id">
                <td> {{i.name}} </td>
                <td> {{i.price}} </td>
                <td> <img :src="'http://127.0.0.1:8000/'+i.img"> </td>
            </tr>
        </table>
        <p>
            <button @click="up_page">上一页</button>
            <button v-for="i in page_list" @click="get_page(i)" :key="i">{{i}}</button>
            <button @click="down_page">下一页</button>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pid:1,
            cid:1,
            goods_list:[],
            page_list:[],
            page_sum:0,
            cate_list:[],
        }
    },
    methods:{
        info(id) {
            this.cid=id
            this.get_goods()
        },
        get_cate() {
            this.axios({
                url:'/app01/cate/',
                method:'get'
            }).then(resp=>{
                console.log(resp.data)
                this.cate_list=resp.data
            })
        },
        up_page(){
            if(this.pid==1){
                
            }else{
                this.pid-=1
                this.get_goods()
            }
        },
        down_page(){
            if(this.pid<this.page_sum){
                this.pid+=1
                this.get_goods()
            }else{
                
            }
        },
        get_page(i){
            this.pid = i
            this.get_goods()
        },
        get_goods(){
            this.axios({
                url:'/app01/goods/',
                method:'get',
                params:{'pid':this.pid,'cid':this.cid}
            }).then(resp=>{
                console.log(resp.data)
                this.goods_list = resp.data.data
                this.page_list = resp.data.page_list
                this.page_sum = resp.data.page_sum
            })
        },
    },
    created() {
        this.get_goods()
        this.get_cate()
    }
}
</script>